<template>
  <div>
    <h1>使用webWordker测试计算任务</h1>
    <div @click="handleClick">点击按钮开始耗时任务</div>
    <div @click="handleClick2">卡死了嘛？</div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

onMounted(() => {})

const handleClick = () => {
  // let sum = 0
  // for (let i = 0; i < 200000; i++) {
  //   for (let i = 0; i < 10000; i++) {
  //     sum += Math.random()
  //   }
  // }

  // console.log(sum, '主线程')
  const start = performance.now()

  const worker = new Worker(new URL('./worker.ts', import.meta.url), {
    type: 'module',
  })
  worker.onmessage = (e) => {
    const end = performance.now()
    console.log(e.data, 'worker')
    console.log(`计算用时: ${end - start} 毫秒`)
    alert(`计算完成了耗时${end - start}毫秒`)
  }
  worker.postMessage('开始计算') // 需要通知一下开始
  console.log('点击按钮')
}

const handleClick2 = () => {
  console.log('卡死了')
  alert('卡死了吗')
}
</script>

<style scoped></style>
